<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>评论列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/template-web.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">
        评论列表
      </div>
      <div class="container-fluid common_con">
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>作者</th>
              <th>评论</th>
              <th>评论在</th>
              <th>提交于</th>
              <th>状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>小周</td>
              <td>这是一条测试评论，欢迎光临</td>
              <td>《世界，你好》</td>
              <td>2017-07-04 12:00:00</td>
              <td>已批准</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-warning btn-xs"
                  >拒绝</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr class="danger">
              <td>小右</td>
              <td>你好啊，交个朋友好吗？</td>
              <td>《世界，你好》</td>
              <td>2017-07-06 14:10:00</td>
              <td>待审核</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-info btn-xs"
                  >批准</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr class="danger">
              <td>老周</td>
              <td>不好</td>
              <td>《世界，你好》</td>
              <td>2017-07-09 22:22:00</td>
              <td>待审核</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-info btn-xs"
                  >批准</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr class="danger">
              <td>中周</td>
              <td>How are you?</td>
              <td>《世界，你好》</td>
              <td>2017-07-09 18:22:00</td>
              <td>待审核</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-info btn-xs"
                  >批准</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>小右</td>
              <td>I am fine thank you and you?</td>
              <td>《世界，你好》</td>
              <td>2017-07-11 22:22:00</td>
              <td>已批准</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-warning btn-xs"
                  >拒绝</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>哈哈</td>
              <td>一针见血</td>
              <td>《世界，你好》</td>
              <td>2017-07-22 09:10:00</td>
              <td>已批准</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-warning btn-xs"
                  >拒绝</a
                >
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>武秀英</td>
              <td>
                外影广条同取水权科速工与。矿身面却属次养导务作者用品油调。高石期品极放存斗一号口消别共去。
              </td>
              <td>《世界，你好》</td>
              <td>1970-03-15 11:31:50</td>
              <td>已拒绝</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>胡娟</td>
              <td>
                采参什正面准观提干在易东统。走部系取团商机酸科往证和流物实则。入程用指学行利划影现清关织方。
              </td>
              <td>《第四篇示例文章》</td>
              <td>1970-03-23 14:16:57</td>
              <td>已拒绝</td>
              <td class="text-center">
                <a href="javascript:void(0);;" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>邵艳</td>
              <td>
                国新研目心思力品家织通还如周气长多。话它思造约众系压程它过去全。必导则达发前何西最老四关向。
              </td>
              <td>《第一篇示例文章》</td>
              <td>1970-04-19 12:34:27</td>
              <td>已拒绝</td>
              <td class="text-center">
                <a
                  href="javascript:editTr( 'trashed',10 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
            <tr>
              <td>唐军</td>
              <td>
                好联律物联使进很们有严这里月之。实养件矿商除政究定划必火起划六。内百那则变次引持只情车各地织持。
              </td>
              <td>《第四篇示例文章》</td>
              <td>1970-04-24 11:22:29</td>
              <td>已批准</td>
              <td class="text-center">
                <a
                  href="javascript:editTr( 'rejected',11 );"
                  class="btn btn-warning btn-xs"
                  >拒绝</a
                >
                <a
                  href="javascript:editTr( 'trashed',11 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="row text-center">
          <!-- 分页导航容器 -->
          <ul id="pagination" class="pagination-sm"></ul>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="./libs/https.js"></script>

<!-- 导入分页导航插件 -->
<script src="./libs/jquery.twbsPagination.js"></script>


<!-- 准备模板引擎 -->
<script type="text/html" id="tpl-list">

  {{each data.data v}}
  {{if v.state == '待审核'}}
  <tr class="danger">
    {{else}}
   <tr>
     {{/if}}
            <td>{{v.author}}</td>
            <td>{{v.content}}</td>
            <td>《{{v.title}}》</td>
            <td>{{v.date}} {{v.time}}</td>
            <td>{{v.state}}</td>
            <td class="text-center">
              {{if v.state=='待审核'}}
              <a href="javascript:void(0);" class="btn btn-success btn-xs"data-id="{{v.id}}">批准</a>
              {{else if v.state=='已通过'}}
              <a href="javascript:void(0);" class="btn btn-warning btn-xs"data-id="{{v.id}}">拒绝</a>
              {{/if}}
              <a href="javascript:void(0);" class="btn btn-danger btn-xs" data-id="{{v.id}}">删除</a>
            </td>
          </tr>
  {{/each}}
</script>

<script>
  $(function(){
    //准备一个全局变量,保存当前页面的页码
      let selpage =1//声明一个变量来保存当前被选中的页码

    function loadData(page){
       selpage = page
      //2.发起ajax
      $.ajax({
        url:BigNew.comment_list,
        type:'get',
        data:{
          page:page,
          perpage:6

        },
        success: function(backData){
          if (backData.code==200) {
            //3.结合模板引擎,渲染结构
            let htmlStr=template('tpl-list',backData)
            $('tbody').html(htmlStr)

            //4.设置分页导航
            //分页插件的属性设置只有第一次才能生效,第一次设置的总页数
            //每次设置新的分页插件之前,必须先销毁之前的
            $('#pagination').twbsPagination('destroy') //摧毁
            $('#pagination').twbsPagination({
            //总页数
            totalPages: backData.data.totalPage,
            //可见页数
            visiblePages: 7,
            //当前选中的页码
            startPage: page,
            //关闭初始化点击事件
            initiateStartPageClick: false,
            //修改按钮的文字
            first: '首页',
            last: '尾页',
            next: '下一页',
            prev: '上一页',
            //分页导航页码点击事件
            onPageClick: function (event, page) {
            //page:当前点击的页面
            //页码被点击的时候,应该请求相对应数字的文章数据
            // console.log(page);
            loadData(page)
            }
            })
            } else {
            //当前请求没有任何的文章数据
            //清空表格内容,再显示文本提示
            $('tbody').empty()
            $('#pagination').text('当前类别没有任何文章....')
            
          }
        }
      });
    }
    //页面首次加载数据,请求第一页的数据
    loadData(1)

    //5.封装函数:处理评论数据(批准,拒绝,删除)
    //这个text;这个按钮需要做的事情
    function changeData(text,dataid){
      let url=''
      //6.确认请求接口的地址
      if (text=='批准') {
        url=BigNew.comment_pass
      }else if (text=='拒绝') {
        url=BigNew.comment_reject
      }else{
        url=BigNew.comment_delete
      }

      //7.根据接口发起ajax请求
      $.ajax({
        url:url,
        type:'post',
        data:{
          id:dataid
        },
        success: function(backData){
          console.log(backData);
          if (backData.code==200) {
            //当操作成功之后,应该重新加载数据
            // loadData(selpage)

            //什么情况下不会对页码会产生影响
            if ($('tbody tr').length>1 ||text == '批准' || text == '拒绝') {
              //当操作成功之后,应当重新加载数据
              loadData(selpage)
            }else{
              //已经对当前页码产生的影响,需要加载上一页的数据
              loadData(selpage-1)
            }
          }
        }
      });
    }

    //给三个按钮设置点击事件
    $('tbody').on('click','.btn',function(){
      //调用函数 修改函数
      let text =$(this).text()//获得操作的文字
      let  dataid=$(this).attr('data-id')//获得评论的id
      changeData(text,dataid)//调用修改函数,传入参数
    })
  })
</script>
